<script setup>
import { computed, onBeforeUnmount } from "vue";
import ModelTop from "./ModelTop.vue";
import BlogModel from "./BlogModel.vue";
import { useBlog } from "@/stores/blog";
import { useContent } from "@/stores/content";

const Blog = useBlog().init()
const Content = useContent().init()

const loading = ref(false); // 加载中
const noMore = ref(false); // 是否加载完了
const disabled = computed(() => loading.value || noMore.value)

// 操作目录方法
const setContent = (pageBlogs) => {
  Content.addContent(
    pageBlogs.map(b => b.blogTittle),
    pageBlogs.map(b => "blogId" + b.blogId)
  )
}

const load = () => {
  loading.value = true;
  Blog.addPageBlogs((isNoMore, pageBLogs) => {
    setContent(pageBLogs)
    if (isNoMore) {
      ElMessage("加载完毕，没有数据了TAT")
      noMore.value = true
    }
    loading.value = false
  })
};
load(); // 初始化

// 退出后去除目录
onBeforeUnmount(() => {
  Content.init()
})

</script>


<template>
  <div v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
    <ModelTop />
    <!-- querySelector不允许id以数字开头，所以这里加个a -->
    <BlogModel v-for="blog in Blog.blogs" :id="'blogId' + blog.blogId" :key="blog.blogId" :blog="blog" />
    <div class="model" v-if="loading">加载中...</div>
  </div>
</template>

<style scoped></style>